<template>
  <div>
    <el-dialog :title="dialogData.title"
               :close-on-click-modal='false'
               :visible.sync="dialogData.show"
               center
               @close="$emit('closedialog')">
      <el-form :model="formInline"
               class="demo-form-inline"
               label-width="100px">
        <el-form-item label="订单编号：">
          <span v-if="formInline.order">{{formInline.order.orderNumber}}</span>
        </el-form-item>
        <el-form-item label="购买时间：">
          <span>{{commonFunction.timestampFormat(new Date(formInline.createTime), 'yyyy-MM-dd hh:mm')}}</span>
        </el-form-item>
        <el-form-item label="订单金额：">
          <span v-if="formInline.order">{{formInline.order.money}}</span>
        </el-form-item>
        <el-form-item label="服务包名称：">
          <span>{{formInline.name}}</span>
        </el-form-item>
        <el-form-item label="购买账号：">
          <span v-if="formInline.user">{{formInline.user.loginName}}</span>
        </el-form-item>
        <el-form-item label="使用人：">
          <span v-if="formInline.user">{{formInline.user.nickName}}</span>
        </el-form-item>
        <el-form-item label="订单状态：">
          <span v-if="formInline.order">{{formInline.order.orderStatus == 3 ?'使用中':'已完成'}}</span>
        </el-form-item>
        <el-form-item label="服务包名称：">
          <span>{{formInline.name}}</span>
        </el-form-item>
        <el-form-item label="所属医院：">
          <span v-if="formInline.hospital">{{formInline.hospital.name}}</span>
        </el-form-item>
        <el-form-item label="带队专家：">
          <span v-if="formInline.leader">{{formInline.leader.nickName}}</span>
        </el-form-item>
        <el-form-item label="服务有效期(月)：">
          <span v-if="formInline.order">{{formInline.order.totalMonth}}</span>
        </el-form-item>
        <el-form-item label="服务包价格：">
          <span v-if="formInline.order">{{formInline.order.money}}</span>
        </el-form-item>
        <el-form-item label="团队成员：">
          <div style="display:flex;flex-wrap:wrap">
            <p v-for="it in formInline.doctorList"
               :key="it.id"
               style="display:flex;flex-direction: column;text-align:center;margin-left:5px">
              <img :src="it.doctor.headImageUrl"
                   style="height:100px;width:100px">
              <span>{{it.doctor.nickName}}</span>
            </p>
          </div>
        </el-form-item>
        <el-form-item label="服务内容：">
          <el-table :data="formInline.itemList"
                    stripe
                    style="width: 100%"
                    border>
            <el-table-column prop="serviceContent"
                             label="服务内容"></el-table-column>
            <el-table-column prop="serviceMethod"
                             label="服务方式"></el-table-column>
            <el-table-column prop="serviceCount"
                             label="服务频次"
                             width="60"></el-table-column>
            <el-table-column prop="introduce"
                             label="说明"></el-table-column>
            <el-table-column prop="extension"
                             label="服务可延期时间（月）"></el-table-column>
          </el-table>
        </el-form-item>
        <div>
          <div v-for="it in formInline.appreciationList"
               :key="it.id*10"
               :label="it.name+'购买数量：'"
               style="float:left;margin-left:30px"
               label-width="150px">
            <span>{{it.name+'购买数量：'}}</span><span>{{it.buyCount}}</span>
          </div>
          <div v-for="it in formInline.appreciationList"
               :key="it.id*6"
               :label="it.name+'赠送数量：'"
               style="float:left;margin-left:30px"
               label-width="150px">
            <span>{{it.name+'赠送数量：'}}</span><span>{{it.sendCount}}</span>
          </div>
        </div>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="$emit('closedialog')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['dialogData'],
  data () {
    return {
      formInline: {}
    }
  },
  methods: {
    getdetail (query) {
      this.post(this.api.cooperationHospital.hospitalPkgManageOrdergetDetail, { "id": query }).then((res) => {
        this.formInline = res.data.object
      });
    }
  },
  mounted () {
    this.getdetail(this.dialogData.info.id)
  }
}
</script>

<style>
</style>